require('../css/enroll.less')
require("../fonts/iconfont.css")
require("../lib/captcha/captcha-mini.js")

//声明一个公共的服务器地址
const BASE_URL='http://139.9.177.51:8099'

let captcha1 = new CaptchaMini({
           // console.log(r, '验证码1');
         //   lineWidth: 1,   //线条宽度
           lineNum: 4,       //线条数量
         //   dotR: 2,          //点的半径
           dotNum: 10,       //点的数量
        //    preGroundColor: [10, 80],    //前景色区间
         //   backGroundColor: [150, 250], //背景色区间
           fontSize: 60,           //字体大小
        //    fontFamily: ['Georgia', '微软雅黑', 'Helvetica', 'Arial'],  //字体类型
         //   fontStyle: 'stroke',      //字体绘制方法，有fill和stroke
         //   content: '一个验证码abcdefghijklmnopqrstuvw生成的插件使用的是canvas显示',  //验证码内容
           length: 4    //验证码长度
});
   
 
let code=undefined;
captcha1.draw(document.querySelector('#captcha1'), r => {
    code=r
});


let cipher=document.querySelector(".cipher");
//获取手机号
let account=document.querySelector("#account");
//获取验证码
let code1=document.querySelector("#code");
//获取密码
let cypher=document.querySelector("#cypher");
//再次输入密码
let cypher2=document.querySelector("#cypher2");
//获取注册按钮
let enter=document.querySelector("#enter");
//获取提示框
let hint=document.querySelector(".hint");

let accountFlag=false;
let code1Flag=false;
let cypherFlag=false;
let cypher2Flag=false;


//点击跳转
cipher.addEventListener("click",function(){
   location.href='./login.html'
})

//验证手机号
account.addEventListener("blur",function(){
   let reg=/^1[3-9]\d{9}$/;
   let bool=reg.test(account.value);
   if(bool){
      account.style.border="1px solid green";
      hint.innerHTML=""
      accountFlag=true;
   }else{
      account.style.border="1px solid red";
      hint.innerHTML="*手机号格式错误！"
      hint.style.color="red";
      accountFlag.false;
   }
})

//验证验证码
code1.addEventListener("blur",function(){
   if(code1.value===code){
      code1.style.border="1px solid green";
      hint.innerHTML=""
      code1Flag=true;
   }else{
      code1.style.border="1px solid red";
      hint.innerHTML="*验证码错误！"
      hint.style.color="red";
      code1Flag=false;
   }
})

//验证密码
cypher.addEventListener("blur",function(){
   let reg=/^[a-zA-Z]\w{2,9}$/;
   let bool=reg.test(cypher.value);
   if(bool){
      cypher.style.border="1px solid green";
      hint.innerHTML=""
      cypherFlag=true;
   }else{
      cypher.style.border="1px solid red";
      hint.innerHTML="*密码格式错误！"
      hint.style.color="red";
      cypherFlag=false;
   }
})

//验证二次密码
cypher2.addEventListener("blur",function(){
   let reg=/^[a-zA-Z]\w{2,9}$/;
   let bool=reg.test(cypher.value);
   if(cypher.value===cypher2.value&&bool){
      cypher2.style.border="1px solid green";
      hint.innerHTML=""
      cypher2Flag=true;
   }else{
      cypher2.style.border="1px solid red";
      hint.innerHTML="*密码不一致！"
      hint.style.color="red";
      cypher2Flag=false;
   }
})

//表单的提交事件
enter.addEventListener("click",function(event){
   //获取焦点
   account.focus();
   code1.focus();
   cypher.focus();
   cypher2.focus();

   //失去焦点
   account.blur();
   code1.blur();
   cypher.blur();
   cypher2.blur();

let bool=accountFlag&&code1Flag&&cypherFlag&&cypher2Flag;
// console.log(accountFlag,code1Flag,cypherFlag,cypher2Flag);
console.log(bool);

if(bool){
   window.$http.post('/users/add',{
      account:account.value,
      password:cypher.value
   
   },function(res){
      console.log(res);
      if(res.status===0){
         location.href='../login.html'
      }else{
         hint.innerHTML="该用户已存在"
         hint.style.color="red";
      }
   })
}else{
   event.preventDefault(); 
   hint.innerHTML="*"
   hint.style.color="red";
}
})

